{"componentChunkName":"component---src-templates-slide-js","path":"/slides/work/react-performance","matchPath":"/slides/work/react-performance/*","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"id":"b71efbdb-4c0f-5457-9b27-5d9eb7ac1c74","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst Cube = React.memo(({\n  color = '#fff',\n  size = 100\n}) => {\n  const childStyle = {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden'\n  };\n  const [pos, setPos] = React.useState([0, 0]);\n  const mainRef = React.useRef(null);\n  React.useEffect(() => {\n    const mousemoveHandler = ev => {\n      if (mainRef.current) {\n        const rect = mainRef.current.getBoundingClientRect();\n        setPos([ev.x - rect.left, ev.y - rect.top]);\n      }\n    };\n    window.addEventListener('mousemove', mousemoveHandler, false);\n    return () => {\n      window.removeEventListener('mousemove', mousemoveHandler);\n    };\n  }, []);\n  return mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      pointerEvent: 'none',\n      width: '100%',\n      height: '100%'\n    },\n    ref: mainRef\n  }, mdx(\"div\", {\n    style: childStyle\n  }, mdx(\"div\", {\n    style: {\n      position: 'absolute',\n      background: color,\n      width: size,\n      height: size,\n      transform: \"translate(-50%, -50%)\",\n      left: pos[0],\n      top: pos[1]\n    }\n  })));\n});\nconst Cube2 = React.memo(({\n  color = '#fff',\n  size = 10\n}) => {\n  const childStyle = {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden'\n  };\n  const mainRef = React.useRef(null);\n  const cubeRef = React.useRef(null);\n  React.useEffect(() => {\n    const mousemoveHandler = ev => {\n      if (mainRef.current && cubeRef.current) {\n        const rect = mainRef.current.getBoundingClientRect();\n        cubeRef.current.style.transform = \"translate(\".concat(ev.x - rect.left, \"px, \").concat(ev.y - rect.top, \"px)\");\n      }\n    };\n    window.addEventListener('mousemove', mousemoveHandler, false);\n    return () => {\n      window.removeEventListener('mousemove', mousemoveHandler);\n    };\n  }, []);\n  return mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      cursor: 'none',\n      pointerEvent: 'none',\n      width: '100%',\n      height: '100%'\n    },\n    ref: mainRef\n  }, mdx(\"div\", {\n    style: childStyle\n  }, mdx(\"div\", {\n    ref: cubeRef,\n    style: {\n      position: 'absolute',\n      background: color,\n      width: size,\n      height: size,\n      left: 0,\n      top: 0\n    }\n  })));\n});\nconst _frontmatter = {\n  \"slug\": \"react-performance\",\n  \"title\": \"React 性能优化案例 - 1\",\n  \"theme\": \"hack\",\n  \"date\": \"2020-09-05 09:36:21\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  Cube,\n  Cube2,\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"React Performance\"), mdx(\"h3\", null, \"React \\u6027\\u80FD\\u4F18\\u5316\\u6848\\u4F8B\\u5206\\u6790 - 1\"), mdx(\"div\", {\n    style: {\n      fontSize: \".9em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u80CC\\u666F\"), mdx(\"div\", {\n    style: {\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, mdx(\"p\", null, \"\\u76EE\\u524D\\u4EA7\\u54C1\\u4E2D\\u6280\\u672F\\u6808\\u5927\\u90E8\\u5206\\u662F React\\uFF0C\\u5927\\u90E8\\u5206\\u6CA1\\u6709\\u9047\\u5230\\u660E\\u663E\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u90E8\\u5206\\u4EA4\\u4E92\\u590D\\u6742\\u7684\\u9875\\u9762\\u5076\\u73B0\\u6709\\u6027\\u80FD\\u5361\\u987F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u90FD\\u53EF\\u4EE5\\u770B\\u5230\\u660E\\u663E\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u6709\\u65F6\\u5019\\u4E00\\u4E9B\"), mdx(\"p\", null, \"\\u4ECA\\u5929\\u5206\\u4EAB\\u4E00\\u4E2A\\u6700\\u5E38\\u89C1\\u7684\\u6027\\u80FD\\u6848\\u4F8B\\u5206\\u6790\\uFF0C\\u5E0C\\u671B\\u5927\\u5BB6\\u80FD\\u591F\\u518D\\u65E5\\u5E38\\u7F16\\u7A0B\\u4E2D\\u7559\\u610F\\u5E76\\u89E3\\u51B3\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u4F8B\\u5B50\"), mdx(\"p\", null, \"\\u8DDF\\u968F\\u9F20\\u6807\\u79FB\\u52A8\\u7684\\u65B9\\u5757\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u4EE3\\u7801\"), mdx(\"p\", {\n    style: {\n      fontSize: '.5em',\n      margin: 0\n    }\n  }, \"\\u5FFD\\u7565\\u89C4\\u8303\\u95EE\\u9898\\u7684\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = ({ size = 100 }) => {\\n  const [pos, setPos] = React.useState([0, 0])\\n  const mainRef = React.useRef(null)\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {\\n        const rect = mainRef.current.getBoundingClientRect()\\n        setPos([ev.x - rect.left, ev.y - rect.top])\\n    }, false)\\n  }, [])\\n\\n  return (\\n    <div ref={mainRef}>\\n      <div style={{ width: size, left: pos[0], top: pos[1]}}></div>\\n    </div>\\n  )\\n}\\n\")), mdx(Cube, {\n    mdxType: \"Cube\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u201C\\u65E0\\u610F\\u4E49\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u201D\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u9010\\u884C\\u68C0\\u67E5\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = ({ size = 100 }) => { // memo \\u7F13\\u5B58\\u7EC4\\u4EF6\\n  const [pos, setPos] = React.useState([0, 0])             // state \\u66F4\\u65B0 = \\u91CD\\u6E32\\u67D3\\n  const r = React.useRef(null)\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {   // \\u9F20\\u6807\\u8DDF\\u968F\\uFF0C\\u6CA1\\u529E\\u6CD5\\u7528\\u8282\\u6D41\\n      const rect = r.current.getBoundingClientRect() // \\u539F\\u751F API\\uFF0C\\u4ECD\\u662F\\u8017\\u65F6\\u64CD\\u4F5C\\n      setPos([ev.x - rect.left, ev.y - rect.top])    // \\u8BA1\\u7B97\\u8017\\u65F6\\n    }, false)\\n  }, [])\\n\\n  return (\\n    <div ref={r}>                       <!-- css \\u5C5E\\u6027\\u5B9A\\u4F4D\\u6539\\u53D8\\u4F1A\\u89E6\\u53D1\\u9875\\u9762\\u91CD\\u7ED8 -->\\n      <div style={{ width: size, left: pos[0], top: pos[1]}}></div>\\n    </div>\\n  )\\n}\\n\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6539\\u8FDB\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = React.memo(({ size = 100 }) => { // size \\u53D8\\u52A8\\u624D\\u4F1A\\u91CD\\u6E32\\u67D3\\n  const r = React.useRef(null)\\n  const r2 = React.useRef(null)   // \\u4E0D\\u4F7F\\u7528 state\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {\\n      const rect = r.current.getBoundingClientRect()\\n      r2.current.style.transform = `translate(${ev.x - rect.left}px, ${ev.y - rect.top})`\\n    }, false)\\n    // dispose\\n  }, [])\\n\\n  return (\\n    <div ref={r}><div ref={r2} style={{ width: size}}></div></div>\\n  )\\n})\\n\")), mdx(Cube2, {\n    mdxType: \"Cube2\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u201C\\u65E0\\u610F\\u4E49 / \\u4E0D\\u5FC5\\u8981 / \\u53EF\\u4F18\\u5316 \\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u201D\"), mdx(\"p\", null, \"\\u5206\\u6790\\u51FA\\u54EA\\u4E9B\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u4F1A\\u5F71\\u54CD\\u91CD\\u7ED8\\uFF0C\\u628A\\u65E0\\u610F\\u4E49\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u4F18\\u5316\\u6389\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"theme":"hack","title":"React 性能优化案例 - 1"}}},"pageContext":{"matchPath":"/slides/work/react-performance/*","isCreatedByStatefulCreatePages":false,"fileAbsolutePath":"D:/ubug/storybook/content/slides/work/react-performance.md","id":"b71efbdb-4c0f-5457-9b27-5d9eb7ac1c74","parent":{"name":"react-performance","sourceInstanceName":"slides"},"excerpt":"React Performance React 性能优化案例分析 - 1 背景 例子 跟随鼠标移动的方块 代码 “无意义的计算和渲染” 逐行检查 改进 “无意义 / 不必要 / 可优化 的计算和渲染” 分析出哪些状态和副作用会影响重绘，把无意义的计算和渲染优化掉 Thank You","fields":{"title":"React 性能优化案例 - 1","slug":"/slides/work/react-performance","description":null,"date":"2020-09-05","redirects":null,"datetime":"2020-09-05 09:36:21","categories":[],"series":null,"tags":[],"status":"online"},"frontmatter":{"published":true,"tags":null,"theme":"hack","slug":"react-performance","date":"2020-09-05 09:36:21"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst Cube = React.memo(({\n  color = '#fff',\n  size = 100\n}) => {\n  const childStyle = {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden'\n  };\n  const [pos, setPos] = React.useState([0, 0]);\n  const mainRef = React.useRef(null);\n  React.useEffect(() => {\n    const mousemoveHandler = ev => {\n      if (mainRef.current) {\n        const rect = mainRef.current.getBoundingClientRect();\n        setPos([ev.x - rect.left, ev.y - rect.top]);\n      }\n    };\n    window.addEventListener('mousemove', mousemoveHandler, false);\n    return () => {\n      window.removeEventListener('mousemove', mousemoveHandler);\n    };\n  }, []);\n  return mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      pointerEvent: 'none',\n      width: '100%',\n      height: '100%'\n    },\n    ref: mainRef\n  }, mdx(\"div\", {\n    style: childStyle\n  }, mdx(\"div\", {\n    style: {\n      position: 'absolute',\n      background: color,\n      width: size,\n      height: size,\n      transform: \"translate(-50%, -50%)\",\n      left: pos[0],\n      top: pos[1]\n    }\n  })));\n});\nconst Cube2 = React.memo(({\n  color = '#fff',\n  size = 10\n}) => {\n  const childStyle = {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden'\n  };\n  const mainRef = React.useRef(null);\n  const cubeRef = React.useRef(null);\n  React.useEffect(() => {\n    const mousemoveHandler = ev => {\n      if (mainRef.current && cubeRef.current) {\n        const rect = mainRef.current.getBoundingClientRect();\n        cubeRef.current.style.transform = \"translate(\".concat(ev.x - rect.left, \"px, \").concat(ev.y - rect.top, \"px)\");\n      }\n    };\n    window.addEventListener('mousemove', mousemoveHandler, false);\n    return () => {\n      window.removeEventListener('mousemove', mousemoveHandler);\n    };\n  }, []);\n  return mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      cursor: 'none',\n      pointerEvent: 'none',\n      width: '100%',\n      height: '100%'\n    },\n    ref: mainRef\n  }, mdx(\"div\", {\n    style: childStyle\n  }, mdx(\"div\", {\n    ref: cubeRef,\n    style: {\n      position: 'absolute',\n      background: color,\n      width: size,\n      height: size,\n      left: 0,\n      top: 0\n    }\n  })));\n});\nconst _frontmatter = {\n  \"slug\": \"react-performance\",\n  \"title\": \"React 性能优化案例 - 1\",\n  \"theme\": \"hack\",\n  \"date\": \"2020-09-05 09:36:21\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  Cube,\n  Cube2,\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"React Performance\"), mdx(\"h3\", null, \"React \\u6027\\u80FD\\u4F18\\u5316\\u6848\\u4F8B\\u5206\\u6790 - 1\"), mdx(\"div\", {\n    style: {\n      fontSize: \".9em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u80CC\\u666F\"), mdx(\"div\", {\n    style: {\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, mdx(\"p\", null, \"\\u76EE\\u524D\\u4EA7\\u54C1\\u4E2D\\u6280\\u672F\\u6808\\u5927\\u90E8\\u5206\\u662F React\\uFF0C\\u5927\\u90E8\\u5206\\u6CA1\\u6709\\u9047\\u5230\\u660E\\u663E\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u90E8\\u5206\\u4EA4\\u4E92\\u590D\\u6742\\u7684\\u9875\\u9762\\u5076\\u73B0\\u6709\\u6027\\u80FD\\u5361\\u987F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u90FD\\u53EF\\u4EE5\\u770B\\u5230\\u660E\\u663E\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u6709\\u65F6\\u5019\\u4E00\\u4E9B\"), mdx(\"p\", null, \"\\u4ECA\\u5929\\u5206\\u4EAB\\u4E00\\u4E2A\\u6700\\u5E38\\u89C1\\u7684\\u6027\\u80FD\\u6848\\u4F8B\\u5206\\u6790\\uFF0C\\u5E0C\\u671B\\u5927\\u5BB6\\u80FD\\u591F\\u518D\\u65E5\\u5E38\\u7F16\\u7A0B\\u4E2D\\u7559\\u610F\\u5E76\\u89E3\\u51B3\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u4F8B\\u5B50\"), mdx(\"p\", null, \"\\u8DDF\\u968F\\u9F20\\u6807\\u79FB\\u52A8\\u7684\\u65B9\\u5757\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u4EE3\\u7801\"), mdx(\"p\", {\n    style: {\n      fontSize: '.5em',\n      margin: 0\n    }\n  }, \"\\u5FFD\\u7565\\u89C4\\u8303\\u95EE\\u9898\\u7684\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = ({ size = 100 }) => {\\n  const [pos, setPos] = React.useState([0, 0])\\n  const mainRef = React.useRef(null)\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {\\n        const rect = mainRef.current.getBoundingClientRect()\\n        setPos([ev.x - rect.left, ev.y - rect.top])\\n    }, false)\\n  }, [])\\n\\n  return (\\n    <div ref={mainRef}>\\n      <div style={{ width: size, left: pos[0], top: pos[1]}}></div>\\n    </div>\\n  )\\n}\\n\")), mdx(Cube, {\n    mdxType: \"Cube\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u201C\\u65E0\\u610F\\u4E49\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u201D\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u9010\\u884C\\u68C0\\u67E5\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = ({ size = 100 }) => { // memo \\u7F13\\u5B58\\u7EC4\\u4EF6\\n  const [pos, setPos] = React.useState([0, 0])             // state \\u66F4\\u65B0 = \\u91CD\\u6E32\\u67D3\\n  const r = React.useRef(null)\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {   // \\u9F20\\u6807\\u8DDF\\u968F\\uFF0C\\u6CA1\\u529E\\u6CD5\\u7528\\u8282\\u6D41\\n      const rect = r.current.getBoundingClientRect() // \\u539F\\u751F API\\uFF0C\\u4ECD\\u662F\\u8017\\u65F6\\u64CD\\u4F5C\\n      setPos([ev.x - rect.left, ev.y - rect.top])    // \\u8BA1\\u7B97\\u8017\\u65F6\\n    }, false)\\n  }, [])\\n\\n  return (\\n    <div ref={r}>                       <!-- css \\u5C5E\\u6027\\u5B9A\\u4F4D\\u6539\\u53D8\\u4F1A\\u89E6\\u53D1\\u9875\\u9762\\u91CD\\u7ED8 -->\\n      <div style={{ width: size, left: pos[0], top: pos[1]}}></div>\\n    </div>\\n  )\\n}\\n\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6539\\u8FDB\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = React.memo(({ size = 100 }) => { // size \\u53D8\\u52A8\\u624D\\u4F1A\\u91CD\\u6E32\\u67D3\\n  const r = React.useRef(null)\\n  const r2 = React.useRef(null)   // \\u4E0D\\u4F7F\\u7528 state\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {\\n      const rect = r.current.getBoundingClientRect()\\n      r2.current.style.transform = `translate(${ev.x - rect.left}px, ${ev.y - rect.top})`\\n    }, false)\\n    // dispose\\n  }, [])\\n\\n  return (\\n    <div ref={r}><div ref={r2} style={{ width: size}}></div></div>\\n  )\\n})\\n\")), mdx(Cube2, {\n    mdxType: \"Cube2\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u201C\\u65E0\\u610F\\u4E49 / \\u4E0D\\u5FC5\\u8981 / \\u53EF\\u4F18\\u5316 \\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u201D\"), mdx(\"p\", null, \"\\u5206\\u6790\\u51FA\\u54EA\\u4E9B\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u4F1A\\u5F71\\u54CD\\u91CD\\u7ED8\\uFF0C\\u628A\\u65E0\\u610F\\u4E49\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u4F18\\u5316\\u6389\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/slides/work/react-performance"}}}